import React from 'react';
import classnames from 'classnames';
import { EnvironmentOutline } from 'antd-mobile-icons'
import { Card } from 'antd-mobile'
import './index.module.scss';

const { memo, useMemo } = React;

interface TrainIProps {
  dbAuftragsnummer:string,
  startDate:string,
  endDate:string,
  startWeek:string,
  endWeek:string,
  startTime:string,
  endTime:string,
  startStation:string,
  endStation:string,
  trainNumber:string
}
function TrainInfo(props: TrainIProps) {
  const {
    dbAuftragsnummer,
    startDate,
    endDate,
    startWeek,
    endWeek,
    startTime,
    endTime,
    startStation,
    endStation,
    trainNumber
  } = props;
  return (
    <>
      <div styleName='db-auftragsnummer'>取票号:{dbAuftragsnummer}</div>
      <div styleName="row-date flex-between" >
        <div styleName='date'>{startDate}{startWeek}</div>
        <div styleName='date'>{endDate}{endWeek}</div>
      </div>
      <div styleName="row-time flex-middle-center" >
        <div styleName='time'>{startTime}</div>
        <div styleName="middle-sign flex-center" >
          <div styleName='line'></div>
          <div styleName='sign'>经停信息</div>
          <div styleName='line'></div>
        </div>
        <div styleName='time'>{endTime}</div>
      </div>
      <div styleName="row-station flex-middle-center">
        <div styleName='station'>
          <span>{startStation}</span>
          <EnvironmentOutline styleName='address-icon' />
        </div>
        <div styleName='number'>{trainNumber}</div>
        <div styleName='station'>
          <EnvironmentOutline styleName='address-icon' />
          <span>{endStation}</span>
        </div>
      </div></>
  );
}

export default memo(TrainInfo);
